<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">切换</button>
        <div v-show="isShow">我是v-show控制的</div>
        <div v-if="isShow">我是v-if控制的</div>

        <h3>根据张刚有多少钱，决定做什么事</h3>
        <div v-if="money >= 5000">今晚请我去按摩</div>
        <div v-else-if="money >= 2000">今晚请我去洗脚</div>
        <div v-else-if="money >= 1000">请我去吃大餐</div>
        <div v-else-if="money >= 500">请我去上网</div>
        <div v-else>暴打张刚一顿，叫他回去取钱</div>


        <!-- 双分支也可以用v-if -->
        <!-- 例如根据年龄决定做什么，如果成年了做一件事，未成年做另外一件事 -->
        <div v-if="age >= 18">成年了，去网吧偷耳机</div>
        <div v-else>未成年，去公园捡垃圾</div>


        <h4>演示v-show做双分支</h4>
        <div v-show="age >= 18">成年了，去网吧偷耳机</div>
        <div v-show="age < 18">未成年，去公园捡垃圾</div>
        
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true,
                money: 3000,
                age: 14
            }
        })
    </script>
</body>
</html>